use leptos::*;
use leptos_meta::*;
use leptos_router::*;
pub mod error_template;
use anyhow::Result;

mod home;
use home::*;
mod form;
use form::*;

mod axumext;
use axumext::*;

mod yeepage;
use yeepage::*;

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();    
    let css_link = if let Some(state) = use_context::< LeptosOptions >(){
        format!("/{}/{}.css", state.site_pkg_dir, state.output_name)
    }else {
        "/site/pkg/start-axum.css".to_string()
    };
    // let spreadable = style(("background-color", "AliceBlue"));
    view! {
        <Stylesheet id="leptos" href={css_link} />      
        <Title formatter=|text| format!("{text} — My Awesome Site")/>
        <Router>       
        <header>
            <h1>"My Application"</h1>
        </header>
        <nav>
            <a href="/">"Page main"</a> " | " 
            <a href="/loong/yeepage">"YeePage"</a> " | " 
            <a href="/user/100">"UserPage"</a> " | " 
            <a href="/form">"Form/get/post"</a>" | " 
            <a href="/axum">"AxumUsage"</a> " | "
            <a href="/get_hello?query=abc" rel="external" >"axum-get"</a> " | " 
            <a href="/err">"Not exist"</a>
        </nav><br/>
        <main>
        <Routes>        
                <Route path="/" view=Home/>                    
                <Route path="/user/:id" view=UserPage/>    
                <Route path="/loong/yeepage" view= YeePage />    
                <Route path="/form" view=FormView/>    
                <Route path="/axum" view=AxumFormView />    
                // <Route path="/*any" view=NotFound/>   
                // 这里不能用  <Route path="/*any" view=NotFound/>   
                // 因为这将导致 axum_start.js和axum_start.wasm 无法被识别为静态资源！
                <Route path="/404" view=NotFound/>                       
        </Routes>
        </main>
        </Router>
    }
    
}


#[derive(Params, PartialEq)]
struct UserParams {
    id: Option<usize>
}


#[component]
pub fn UserPage() -> impl IntoView {
    let params = use_params_map();
    // let query = use_query_map();
    // id: || -> Option<String>
    let id = move || {
        params.with(|params| params.get("id").cloned())
    };
    let id = if id().is_none() {
        "None()".to_owned()
    }else{
        id().unwrap()
    };
 
      
    view! {                  
        <Title  text = "UserPage" />
        <div>
          <label> "路由参数的获取案例：use_params_map() for /user/:id " </label> 
          <br/>
            "UserId = "{id}
        </div>        
    }    
}


#[component]
pub fn NotFound() -> impl IntoView {

    view! {
        <div>
            <h1>"NOT FOUND"</h1>
        </div>
    }    
}

 
